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ABSTRACT 



The purpose of this study was : (1) to look at the design, 

aesthetics, and functionality of educational and noneducational Web pages 
from the perspective of visual literacy; and (2) to evaluate printed and 
online materials that are used as resources by professionals and 
nonprofessionals to create these Web pages. These "how to" manuals were 
evaluated for their discussion of good screen design, the use of graphics and 
icons as communication, backgrounds, hypertext, linking, and overall 
understanding of publishing on the World Wide Web. The Web pages were divided 
into major categories and subcategories. The educational categories included 
K-12 schools and colleges/universities, and the noneducation categories 
included commercial, publications and communications, informational and 
cultural, and personal Web pages. Two evaluation instruments were developed: 
one contained 21 questions for evaluating online and printed resource 
materials; a second evaluation instrument contained 57 questions that were 
embedded in the categories of design, graphics, text, and color. These 
categories were divided into aesthetics and functionality. Initial data 
analysis indicates a wide range of quality in all the sites. The commercial 
sites developed by professionals contained animations and sophisticated 
graphics which met the evaluation criteria, but tended to target a narrow 
group of people; some of the Web pages were well designed and met the needs 
of the general user. Evaluation of the printed and online materials indicates 
a strong agreement in the use of how to create in HTML language and the 
technical aspects of using specific image formats for World Wide Web 
publishing. (Contains 22 references.) (AEF) 
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Abstract 

This study examines educational and non-educational WWW web pages that exhibit an 
understanding of visual literacy principles. The study also examines on-line and printed 
matenals that show how to construct web pages. It uses this paradigm to analyze these web 
pages and pnnted materials, for qualities that exhibits good design elements from pages that 

exhibit weak design. It concludes with a recommendation for further research to ouantifv thp ^ 

qualities that were found. M / i 



Introduction 

A revolution is taking place — a digital 
revolution and the “most crucial task 
before us is not putting in place the digital 
plumbing of broadband communications 
links... but rather one of imagining and 
creating digitally mediated environments 
for the kinds of lives we want to lead and 
the sorts of communities we want to 
have.” (Mitchell, 1996, p. 5). One 
alteration of this revolution is the digital 
environment of the graphical user 
interface (GUI). This environment, once 
static and linear, has changed. Users relate 
mutually to screens that are visual, 
interactive and non-linear (Jones, 1995). 
Another transformation is the 
manipulation of images. Electronic tools 
allow the user to capture, display, distort, 
enhance, store and print images. These 
“developing technologies... blur 
distinctions between actual and represented 
reality...” (Stieglitz, 1995, p 22). 

The Internet, a global network linking 
niillions of people world wide, is a 
digitally-mediated environment. The 
Internet is made easily accessible through 
World Wide Web (WWW) browsers. These 
interactive browsers, i.e., Netscape, Internet. 
Explorer, Mosaic, include informational 
displays and access tools presented to users 
in the form of web pages. These pages, 
created in a computer language called 
HTML (Hypertext Markup Language) 
contain hyperlinks -- graphics, buttons, 
icons, images, colored text, animation, 
video — that allow the users to browse the 
contents of the page, search and retrieve 
information, and link to other web pages 
around the world. Recent developments in 
on-line communication tools provide the 
ordinary user the ability to create 
interactive pages and offer course delivery 
on the WWW. “The technology to 



transfer and transmit graphic and other 
forms of visual communication 
instantaneously around the globe has 
made available for communication, a large 
audience, which is often visually illiterate” 

(Saunders, 1994, p 186). 

Purpose 

The purpose of the study was twofold: 

(1) to look at the design, aesthetics, and 
functionality of educational and non- 
educational web pages from the 
perspective of visual literacy and, (2) to 
evaluate printed and on-line materials that 
are used as resources by professionals and 
nonprofessionals to create these web 
pages. These “how to” manuals were 
evaluated for their discussion of good 
screen design, the use of graphics and 
icons as communication, backgrounds, 
hypertext, linking, and overall 
understanding of publishing on the WWW. 

The web pages were divided into major 
categories and sub-categories. The 
educational categories included K-12 
schools and colleges/universities. The non- 
educational categories included 
commercial, publications and 

communications, informational and 
cultural, and personal web pages. 

The subject of images, graphics, and 
icons is critical. From a technical aspect, 
if an image is memory intensive and being 
viewed with a low speed modem or limited 
machine capacity, the images load slowly. 

In creating web pages, the designer must 
convey tp the user ways to access 
hyperlinks. This is sometimes done | 

through icons, images, or text that act as i 

interactive buttons. When the user clicks I 

on these hyperlinks they ^e connected to„p^p|^|gg|Q^ .^q 
new information, other web sites, or further^ATERiAL has been granted 
resources. To be interactive the buttons 
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must be properly coded in HTML, thus, 
guiding the user. 

The “business of creating web sites” is 
rampant. Many services, both on-line and 
printed references offer “how to” 
construction of web pages. However, little 
thought is given to the overall image of the 
page. Usually the focus is on the HTML 
language. 

Background 

The explosion of the WWW as an 
informational tool on the Internet (Descy, 
1994) provides students and teachers, at all 
levels of education, with up-to-date 
information and continuous access to 
resources world wide. In effect, the 
Internet is a virtual library of information 
(Doyle, June, 1994). 

Most recently, the development of 
electronic utilities provided through WWW 
links, growth of software that contains 
HTML readers, and publishing of on-line 
and printed technical manuals have 
provided ordinary computer users with the 
ability to easily access, create, and publish 
web pages. In particular, K-12 educators 
have begun to create web pages as a way to 
provide information about their schools 
and classrooms, display student work, 
provide links for student-generated 
research, and link with other schools to 
allow students to collaborate with one 
another in learning activities i.e., creative 
writing and problem solving. 

Colleges and universities also use web 
pages as marketing strategies to provide 
information about the programs and 
courses they offer, as a way for students to 
apply to these programs or to register for 
courses. In addition, web pages are being 
created by college and university 
professors to offer courses via the WWW. 

The increased ability to create web pages 
that use graphics, icons, and images to 
communicate a problem comes at a time 
when “our educational systems have 
reduced the number of courses in art 
education and.... the availability of courses 
in visual literacy that would advance seeing 
and interpreting what is seen are only 
recently finding support in the educational 
system” (Saunders, 1994, p 187). Thus, 
many educators and students creating web 
pages have had little guidance concerning 
the visual design elements. The myriad of 
technical manuals provide information 
about how to create web pages but they 



don’t specifically address the necessary 
design elements that will help the web page 
communicate clearly and appear 
aesthetically pleasing. 

Visual design is a significant factor in 
the development of web pages. The 
“...visual medium is. ..superior because it 
offers structural equivalents to. ...objects, 
events, relations and visual elements that 
can be “organized according to readily 
definable patterns.” (Amheim, 1969, p. 
232) Visual representations in the form of 
icons, graphics, and images are defined in 
two- and three-dimensional space as 
compared to the one-dimensional space of 
text (1969). According to Saunders 
(1994, p. 186-187), these visual 
representations (graphics) function as a 
communication tool because they are: 

• based on things that are seen 

• appeal to our emotions as well as 
intellect 

• convey a single overwhelming 
meaning or message 

• communicate information 

• comprise a language and grammar of 
which most of us are ignorant 

• are not designed to encourage 
feedback from the audience 

Effective web pages contain good screen 
design, graphics, icons, background 
images, image maps, and hypertext. The 
construction of web pages involves an 
understanding of the use of these 
elements. This understanding is inherent 
in the aesthetic and technical function of 
informational and form design as well as 
graphical user interfaces. 

“Good screen design uses the visual to 
portray the message to the reader.” Text 
with white space, the position of graphics, 
mixture of text and graphics, consistent 
placement of navigational buttons, 
standard icons, and borders act as visual 
aids to the user (Knupfer, 1994, p. 216). 

Graphics are used to make visual 
statements — to communicate visually. 
Visual statements are “an object or 
collection of objects created or assembled 
for the purpose of being seen and 
experienced” (Curtiss, 1987, p. 4). Visual 
statements contain visual symbols that 
include shape, color, dot, line, and style. 
(Such statements also include form — the 
expressed ideas and conveyed meanings 
behind the elements that give support to 
the communication of the visual statement 
(Seels, 1994). To effectively communicate 
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with visuals, creators of web pages must 
consider the simplicity and clarity of the 
images, balance, harmony and 
organization of the text and images, 
aspects of framing, and emphasis color, 
texture, and space. (Thompson, 1994). 

Icons to serve as “reference points. ...for 
searching and retrieving information” 
(Ma, 1995, p. 33). Icons also can be used 
as signs. Signs are “...organized into 
systems of meanings or codes” 
(Muffoletto, 1994). Signs can also be 
influenced by' social and cultural 
meanings. Ma (1994) studied the 
meanings of icons on the WWW pages of 
150 United States libraries. A sample of 
icons Ma found included an icon 
depicting a web overlaid with a 
magnifying glass to depict Internet 
resources, book-shaped icons that 
represent on-line catalogs, periodicals, etc., 
and icons that portray a highway to 
catalog Internet resources. Semiotic 
analysis of icons indicated that familiar 
icons used to index traditional library 
resources were being used to index 
resources indicative to the resources on the 
WWW 

Backgrounds and background images 
are important design components. Used 
appropriately, background images can 
enhance the foreground icons, graphics, 
and text. Many novice designers include 
these images to “add a theme. ..or because 
they fill up unused space” (Siegel, 1996, 
p. 131). 

Image maps (complex images that 
produce multiple hyperlinks) contain 
visucil, navigational, and practical 
characteristics. Visual characteristics are 
clues that are recognized by the viewer and 
meet the viewer’s expectations pertinent to 
the information. Navigational 

characteristics include the viewer 
recognition and initiation of linked 
information being used to index resources 
indicative to the resources on the WWW. 

Practical characteristics include technical 
aspects such as image load time, 
background and special effects not 
cluttering the vision of the viewer, and 
whether graphics fit the target audience 
(Cochenour, Lee, and WiOcins, 1995). 
Cochenour and others (1995) evaluated 
nine WWW sites that contained image maps 
for visual, navigational, and practical 
characteristics. Nine viewers evaluated the 
sites and “they seemed to judge the 



degree of appeal by how easily they could 
get to information" (p. 170). The web 
sites receiving the highest ranks contained 
simple images and a well-ordered layout 
with clearly defined hot spots and a limited 
number of choices. Hypertext links are 
critical to web page design. These links 
are words or phrases that are underlined 
and colored to denote a link to more 
information or other web sites. The 
conventional use of color displays the 
“unvisited” links as blue and the 
“visited” links as purple. 

This study investigated the use of these 
design elements in software and printed 
materials that tell how to create web pages 
and in the web pages created by students 
and teachers in elementary, middle, and 
high schools as well as those in colleges 
and universities. 

Methodology 

For this research the web sites were 
categorized into two main groups, 
educational and noneducational. Then 
each of those larger categories were 
further subdivided. Figure 1 shows the 
organization of the educational web page 
site categories and Figure 2 shows the 
organization of the non-educational web 
page site categories. 

Development of Evaluation Instrument 

Considering there is no previous 
research about designing web pages from 
the perspective of visutil literacy, the 
researchers began by examining the 
literature for checklists that related to the 
basic elements of visual statements, GUI 
design, hypermedia design, and publishing 
on the WWW (Curtiss, 1987; Lucas, 1991; 
Schwier, 1991; Cates, 1992; Tolhurst, 
1992; Wiggins, 1995). From these 
checklists two evaluation instruments were 

Figure 1 

Educational Web Site Categories 



Elemenentary School 

Student, Teacher, School 
MiddU School 



Student, Teacher, School 
High School 

Student, Teacher, School 
College or University 

Student, Teacher, School 
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Figure 2 

Non-Educational Web Site Categories 






Commercial 

Company Information about Products 
Product Instruction — how to Use 
Advertising 

Publications / Communications 
Newspapers /Magazines 
Radio / TV 
Journals / Books 
Informational / Cultural 
Museum / Library 
Community 
Special Interest 
Personal 
Professional 
Family 
Introduction 



developed and refined based upon a six- 
point Likert-type scale. One instrument 
contained 21 questions for evaluating on- 
line and printed resource materials. 
Examples of the evaluation criteria in this 
instrument are: 

• Contains introductory information 

about the general WWW environment 

• Use of browsers 

• Explanations of image formats (tiff, 

pict, jpeg, gif, etc.) 

• Use of color 

• Links 

• Publishing on the WWW 

• Examples provided 

• Emerging trends 

A second evaluation instrument 
contained 57 questions that were 

embedded in the categories: design, 

graphics, text, and color. These categories 
were divided into aesthetics and 

functionality. These questions were used 
for evaluating K-12 schools, and 
college/university web sites. This 
instrument was also used to evaluate 
informational and cultural as well as 
personal pages. A sample of the 
evaluation criteria include: 

Design - aesthetics 

• Design elements are aesthetically 

consistent (consistent headers, 

background, font sizes, etc.). 



• The page has appropriate white space. 

• The background contributes to the 
overall design. 

Design - functionality 

• The design appears to be created for 
lay computer users not experts. 

• The message is clear. 

• The message is concise. 

• The site appears to be current. 

• A text only option is available when 
large graphics load slowly. 

• The links function properly. 

• Graphics load with reasonable speed. 

Graphics - aesthetics 

• The graphics do not distract the user 
from the main message of the page. 

• The graphics that are intended to be 
buttons look like buttons (easily 
recognizable as buttons) 

• The graphics that are not intended to 
be buttons do not look like buttons 
(you do not do false clicks hoping to 
go somewhere). 

• Graphics are easily interpreted. 

Graphics - functionality 

• The site uses appropriate thumbnail 
graphics (user doesn’t need to use 
time and memory loading in memory 
intensive graphics). 

• Graphics enhance the message of the 
page. 

Text - aesthetics 

• The properties of the text (font, style, 
size, color, pattern, etc.) are 
aesthetically appealing. 

• The color of the text is aesthetically 
compatible with other design elements 
on the page. 

• The layout of the text is aesthetically 
pleasing. 

Text - functionality 

• The color of the text does not distract 
the user from the main message of the 
page. 

• The layout of the text does not distract 
the user from the main message of the 
page. 

Color - aesthetics 

• Color changes are used to convey a 
message (visited links, happy-sad, day- 
night, timed elapsed, etc.) 
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• The design makes use of warm (red, 
orange, yellow) and cool (purple, blue, 
green) colors. 

Color -- functionality 

• The design of colors considers the age 
of the final user. 

• The color scheme is appropriate for 
color-blind users. 

• The background color is aesthetically 
pleasing. 

WWW Site Selection 
Sites were randomly selected from the 
web. Various descriptors, such as, creating 
web pages, HTML, web page design, and 
so on, were used in various search engines 
to illicit web sites containing resources 
about how to create web pages. 

An initial list of publishers who produce 
information about how to design and 
create web pages was constructed based 
upon a search of on-line, bookstore, and 
library materials. Over 100 electronic sites 
and 25 printed manuals were evaluated. 
The web page sampling source for schools 
and colleges/universities was gathered 
from the Yahoo search engine using the 
education category. Twenty sites were 
randomly selected for each elementary, 
middle school, high school, college and 
university (n = 160). The K-12 web sites 
included both public and private United 
States schools. Higher education sites 
included public/private colleges and 
universities in the United States and four 
countries around the world. 

Independent Evaluators 
Four graduate students majoring in 
educational technology at a major mid- 
western university evaluated the 
commercial, informational, cultural, on- 
line and printed materials, and personal 
web sites. K-12 school and 

college/university web sites were evaluated 
by an associate and an assistant professor 
of educational technology. Both 
professors teach the use of the Internet and 
the WWW to graduate students. 

Results 

Initial data analysis of graphics, text, 
color, and design characteristics within the 
components of aesthetics and functionality 
indicates a wide range of quality in all the 
sites. The commercial sites developed by 
professionals contained animations and 



sophisticated graphics which met the 
criteria for evaluation but they tended to 
target a narrow group of people. For 
example, product information sites can be 
very technical and difficult for the 
common user to understand. An example 
is the About Abbey Camera 
(http://abbeycamera.com/) web page. This 
site is targeted for general audiences but 
the navigational icons are not consistent 
and tend to mislead the user as to their use. 

Some of the web pages are well designed 
and meet the needs of the general user. 
Examples of such sites are the JC Penney’ s 
and the Ben and Jerry’s Ice Cream sites 
(see the sites at http://www.jcpenney.com/ 
and http://www.benjerry.com). The 
meaning and the matching of the text and 
the images are consistent and appropriate 
for general adult users. Federal Express 
(http://fedex.com/). Land’s End 
(http://www.landsend.com/ are examples of 
sites that target specific users. These sites 
contain icons and links that guide users 
who want to find shipping information, 
ship parcels or order items. The icons are 
understandable and link to pertinent 
information about shipping parcels and 
other aspects of the each companies’ 
business. 

Evaluation of the printed and on-line 
materials indicates a strong agreement in 
the use of how to create in HTML 
language and the technical aspects of 
using specific image formats (gif, tiff, jpeg, 
mpeg) for WWW publishing. Examples of 
these printed and on-line publications 
include: 

Fry, A. and Paul, D. (1995). How to 
publish on the internet. New York, NY: 
Warner Books; 

Danesh, A. (1996). Teach yourself web 
page design. Indianapolis, IN: Sams.net 
Publishing 

Home page creator [On-line]. 
www.angelfire.com/freepages/create.html 

Netamorphix [On-line]. 

http://trace.‘wisc.edu/TEXT/GUIDELNS/HT 

MLGIDE/htmlfull.html 

Lynch, P. (1995). Yale C/AIM WWW style 
manual [On-line]. http: //info.med. 

yale. edu/ cairn/ printinfo. html 




359 



6 



Niederst, J. & Freedman, E. (1996). 
Designing for the web: Getting started in a 
new medium. Sabastopol, CA : O’Riley 7 
Associates, Inc.. 

Rogers, S. & Wise, A. (1996). Home page 
beautiful. Radiant Productions. [On-line]. 
http://click.com.av/click/v03/deconstruction/ 
index.html 

Wilson, S. (1995). World wide web design 
guide: Learn to design professional web 
pages . Indianapolis, IN: Hayden Books. 

However, there is little agreement on the 
inclusion of elements of good screen 
design, appropriate size of graphics, use of 
icons for navigational purposes, and 
designing the screen as a portrait. (That is, 
the message is the object and the portrait is 
the screen.) Still, there are exceptions in 
both print and on-line publications. The 
authors discussed the use and aesthetics of 
images, backgrounds, text, graphics 
functionality and emerging trends. The 
user is provided with examples in the 
printed publication that correlate to 
examples in the on-line publications. 
These include: 

Horton, W., Taylor, L., lanacio, A. & Hoft, 
N. (1996). The web page design 
cookbook: All the ingredients you need to 
create 5 star web pages. New York, NY: 
John Wiley & Sons, Inc. 

Horton, W. (1966). Illustrating computer 
documentation. New York, NY: John 

Wiley & Sons, Inc. 

Siegel, D. (1996). Creating Killer Web 
Sites. Indianapolis, IN: Hayden Books. 

[On-line] http://www.killersites.com. 

Evaluation of school sites indicates a 
strong use of backgrounds that tend to 
distract from the overall message. School 
sites tend to use text rather than images to 
present information. They use text whose 
properties (color, font, style, size) are 
difficult to read because the background 
interferes. Also, they use text that is 
targeted for adult users rather than the age 
of students attending these schools. 
Examples of these sites include: 

Bethesda-Chevy Chase High School [On- 
line]. www.mcps.kl2.md.us/schools/bcchs/ 



Chaffee Elementary School [On-line]. 
www.traveller.eom/-lpearce/Chaffee/Chaffe 
e.html 

Fall Brook Union High School [On-line]. 
sd.znet.com/-schester/FUHS/index.html 

Hardyston Township Elementary School 
[On-line]. 

www.garden.net/users/hardyston/ 

non-enhanced.html 

Longfellow Elementary School [On-line] 
www.nothinbut.net/-dhannah/xlongfel.html 

Orange Grove Elementary School [On- 
line] WWW. awod. com/ gallery/ rwav/ oge/ 

Quail Run Elementary School [On-line] 
WWW. sped, ukans. edu/ -scottk/ qr/ 

Examples of K-12 schools whose web 
sites contain good screen design, graphics 
that are aesthetically and functionally 
appropriate include: 

Brookfield Central High School [On- 
line]. WWW. axisnet. net/ -bchs/ 

Burke, Harry A. High School [On-line]. 
WWW. esul9. kl2. ne. us/burke/BHS.html 

Kyerene Akimel A-Al Middle School 
[On-line]. 204.17. 16. 101/Akimel/ams.html 

Robinson, Andrew Elementary School 
[On-line]. www. rockets, org/ 

A further analysis of school sites 
indicates that the functions of graphics are 
not always apparent. Graphics which were 
not intended to be buttons looked like 
buttons, thus confusing the user. 

Whereas K-12 schools use web sites as a 
way of introducing themselves to the 
WWW and promoting their school 
community, colleges and universities use 
their web sites for a variety of purposes, 
i.e., new student application, on-line 
registration, promotion, on-line courses, 
announcements, faculty and student 
homepages. Data for colleges and 
universities indicates a strong agreement in 
the areas of good screen design, use of 
color, white space, and icons that are 
effective navigational tools. Examples 
include: 
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Arizona State University [On-line]. 
www.asu.edu/asuweb/ 

College of the Menominee Nation[On- 
line] www.menominee.com/ 

Design functionality data regarding the 
updating of information, clues that reflect 
the information size, or provide a text only 
option when memory-intensive graphics 
are present indicates strong disagreement 
among all many K-12 schools and 
colleges and university web sites. 
However, many commercial, personal, and 
educational web pages contain indications 
of last update, informational size or 
provide a text option. 

Conclusions 

1 . Preliminary data analysis indicates that 
the majority of the web pages use a 
simple design, with the standard blue 
and purple colors used for unvisited 
and visited sites. 

2. Few web pages contained clues that 
would indicate the size of the files in 
the site. 

3. The majority of web page 
backgrounds used distracting patterns 
and/or color. 

4. In many cases the designers seemed to 
forget to maintain message of the 
page. 

5. There was a tendency in most of the 
personal pages not to indicate the path 
the user is following. The user should 
be able to tell where he or she came 
from, how to go back and find his or 
her way around. 

6. Many sites did not indicate whether the 
site had been updated. This may lead 
the user to loose interest in the site. 

7. In many cases, graphics that looked 
like buttons were not. 

8. The use of thumbnail graphics was 
minimal. 

Recommendaations 

The next phase of this study is to 
perform an in-depth data analysis. 
Following that, a formal evaluation of the 
data should be completed. From a 
preliminary analysis, the following 
considerations merit investigation; 

1. Should the elements of the visual arts, 
dot, line, color, text that have been 
standard for decades apply to the 
medium of on-line publications? 



O 




2. Which literary publicatioon 

conventions should or should not be 
applied to the unique environment of 
web pages? 

3. In what ways do the questions of 

interactivity, connection and 

interconnections, user control, and 

expeditious information gathering 

contribute to new publishing 

conventions? 

4. How does the relationship of not 

knowing how a publication is 

structured impact the ability to 
communicate? 
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